<!--
 * @Descripttion: 过滤器V2 常用组件
 * @version: 2.0
 * @Author: sakuya
 * @Date: 2021年7月31日16:49:56
 * @LastEditors: Xujianchen
 * @LastEditTime: 2023-03-17 10:17:37
-->

<template>
	<div class="sc-filter-my">
		<div v-if="loading" class="sc-filter-my-loading">
			<el-skeleton :rows="2" animated />
		</div>
		<template v-else>
			<el-empty v-if="myFilter.length <= 0" :image-size="100">
				<template #description>
					<h2>没有常用的过滤</h2>
					<p style="margin-top: 10px; max-width: 300px">
						常用过滤可以将多个过滤条件保存为一个集合，方便下次进行相同条件的过滤
					</p>
				</template>
			</el-empty>
			<ul v-else class="sc-filter-my-list">
				<h2>我的常用过滤</h2>
				<li v-for="(item, index) in myFilter" :key="index" @click="selectMyfilter(item)">
					<label>{{ item.title }}</label>
					<el-popconfirm title="确认删除此常用过滤吗？" @confirm="closeMyfilter(item, index)">
						<template #reference>
							<el-icon class="del" @click.stop="() => {}"><el-icon-delete /></el-icon>
						</template>
					</el-popconfirm>
				</li>
			</ul>
		</template>
	</div>
</template>

<script>
import config from '@/config/filterBar'

export default {
	props: {
		filterName: { type: String, default: '' },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			loading: false,
			myFilter: []
		}
	},
	watch: {
		data: {
			handler() {
				this.myFilter = this.data
			},
			deep: true
		}
	},
	mounted() {
		this.myFilter = this.data
		this.getMyfilter()
	},
	methods: {
		//选择常用过滤
		selectMyfilter(item) {
			this.$emit('selectMyfilter', item)
		},
		//删除常用过滤
		async closeMyfilter(item, index) {
			try {
				var del = await config.delMy(this.filterName)
			} catch (error) {
				return false
			}
			if (!del) {
				return false
			}
			this.myFilter.splice(index, 1)
			this.$message.success('删除常用成功')
		},
		//远程获取我的常用
		async getMyfilter() {
			this.loading = true
			try {
				this.myFilter = await config.getMy(this.filterName)
			} catch (error) {
				return false
			}
			this.loading = false
		}
	}
}
</script>

<style scoped>
.sc-filter-my-loading {
	padding: 15px;
}
.sc-filter-my-list {
	list-style-type: none;
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
}
.sc-filter-my-list h2 {
	font-size: 12px;
	color: #999;
	font-weight: normal;
	padding: 20px;
}
.sc-filter-my-list li {
	padding: 12px 20px;
	cursor: pointer;
	position: relative;
	color: #3c4a54;
	padding-right: 80px;
}
.sc-filter-my-list li:hover {
	background: #ecf5ff;
	color: #409eff;
}
.sc-filter-my-list li label {
	cursor: pointer;
	font-size: 14px;
	line-height: 1.8;
}
.sc-filter-my-list li label span {
	color: #999;
	margin-right: 10px;
}
.sc-filter-my-list li .del {
	position: absolute;
	right: 20px;
	top: 8px;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
}
.sc-filter-my-list li .del:hover {
	background: #f56c6c;
	color: #fff;
}

[data-theme='dark'] .sc-filter-my .el-empty h2 {
	color: #fff;
}
[data-theme='dark'] .sc-filter-my-list {
	background: none;
	border-color: var(--el-border-color-base);
}
[data-theme='dark'] .sc-filter-my-list li {
	color: #d0d0d0;
}
[data-theme='dark'] .sc-filter-my-list li:hover {
	background: var(--el-color-white);
}
</style>
